<template>
  <div>
    <n-input ref="inputRef"
             @keydown.enter.stop="handleSearch"
             v-model:value="keyword"
             v-bind="$attrs"
             round
             placeholder="...">
      <template #prefix>
        <n-icon>
          <icon icon="mdi:search"></icon>
        </n-icon>
      </template>
    </n-input>
  </div>
</template>

<script setup lang="ts">

import {Icon} from "@iconify/vue";
import {ref} from "vue";
import router from "@/router";
import {useAppStore} from "@/store";

const appStore = useAppStore()

const inputRef=ref()
const keyword = ref('')


const handleSearch = () => {
  router.push({
    path: `/pc/post/search`,
    query: {
      keyword: keyword.value
    }
  })
  appStore.searchKey(keyword.value)
}

const doFocus = () => {
  inputRef.value.focus()
}
defineExpose({
  doFocus
})
</script>

<style scoped>

</style>